<template>
	<div style="display: flex; justify-content: center; margin-top: 150px;">
		<el-card style="width: 500px; margin-bottom: 350px;">
			<div>
				<h1 style="color:#409EFF; display:flex; justify-content:center; margin-top:10px">用户登录</h1>
			</div>
			<el-form ref="loginFrom" :model="loginFrom" :rules="rules" style="margin:30px">
				<el-form-item label="账号" prop="username">
					<el-input v-model="loginFrom.username" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginFrom.password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item>
					<el-button @click="login" style="margin-left: 100px;" type="primary" round>登录</el-button>
					<el-button @click="reset" round>取消</el-button>
				</el-form-item>
			</el-form>

		</el-card>

	</div>

</template>

<script>
	import Qs from 'qs'
	import { ElMessage } from 'element-plus'


	export default {
		data() {
			return {
				loginFrom: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}, ],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}],
				},
			}
		},

		methods: {
			login() {
				this.$refs.loginFrom.validate(valid => {
					if (valid) {
						this.$api.post("/user/login",
								Qs.stringify(this.loginFrom), {
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									}
								})
							.then((res) => {
								if (res.data.code === '200') {
									ElMessage({message:"登录成功",type: 'success',})
									window.sessionStorage.setItem("username", res.data.data.username);
									window.sessionStorage.setItem("userId", res.data.data.id);
									this.$router.replace({path: "/main"});
									this.$router.go(0)
								} else{
									ElMessage.error(res.data.msg)
								}

							})

					}

				})
			},
			reset() {
				this.loginFrom.username = '';
				this.loginFrom.password = '';
			}
		},
	}
</script>

<style>
</style>
